import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

import Api from '../../../api';
import { Post } from '../../../types';

function PageUserSummary() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    Api.Post.getPostList()
      .then((postList) => setPosts(postList))
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      <ul>
        {posts.map((it) => (
          <li key={it.postId}>
            <Link to={`/p/${it.postId}`}>{it.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PageUserSummary;
